<template>
  <el-card>
    <el-header> AQI空气质量指数超标趋势 </el-header>
    <pure-table :data="tableData" :columns="columns" stripe />
  </el-card>
</template>

<script lang="ts" setup>
import { getAqiIndexTrend } from "@/api/aqiMeasuredResult";
import { onMounted, ref } from "vue";

defineOptions({
  name: "AqiTrend"
});

const tableData = ref([]);

const columns: TableColumnList = [
  {
    label: "序号",
    prop: "index",
    sortable: true
  },
  {
    label: "月份",
    prop: "month"
  },
  {
    label: "AQI空气质量指数超标数量",
    prop: "count"
  }
];

const getAqiTrend = async () => {
  try {
    const { data } = await getAqiIndexTrend();
    tableData.value = data.map((item, index) => ({
      ...item,
      index: index + 1
    }));
    console.log(tableData.value);
  } catch (error) {
    console.log(error);
  }
};

onMounted(() => {
  console.log("onMounted");
  getAqiTrend();
});
</script>

<style>
.el-header {
  font-weight: bold;
  color: black;
  font-size: 20px;
  text-align: center;
}
</style>
